interface CommentItem {
  commentId: number,
  content: string,
  likes: number,
  timestamp: string,
  user: {
    userId: number,
    username: string,
    avatar: string
  },
  repliesLength: number
  replies: any,
}
interface GalleryDetail {
  name: string,
  detail: {
    likes: number,
    comments: number,
    collects: number,
    picUrl: string[]
  },
  comments: any,
}
const app = getApp()
Page({
  /**
   * 页面的初始数据
   */
  data: {
    name: "",
    likes: 0,
    comments: 0,
    collects: 0,
    picUrl: [] as string[],
    isLiked: false,
    isCollected: false,
    commentArr: [] as CommentItem[],
    commentFocus: false,
    commentPlaceholder: "",
    inputValue: "",
    member: "",
    commentIndex: -1,
    commentLoading: false,
    userId: 0,
    showDelete: false,
    deleteIndex: -1,
    starIndex: -1,
    isShowStarModal: true,
    starArr: [
      { name: "创意", url: "/images/star-of-creative.png", value: 0 },
      { name: "绘画", url: "/images/star-of-painting.png", value: 1 },
      { name: "思考", url: "/images/star-of-thinking.png", value: 2 },
      { name: "态度", url: "/images/star-of-attitude.png", value: 3 }
    ]
  },
  handleLike() {
    this.setData({
      isLiked: !this.data.isLiked
    })
  },
  handleConfirm() {
    this.setData({
      isShowStarModal: false
    })
  },
  handleCollect() {
    this.setData({
      isCollected: !this.data.isCollected
    })
  },
  handleStar(e: any) {
    const { index } = e.currentTarget.dataset;
    this.setData({
      starIndex: index
    })
  },
  handleInput(e: any) {
    const { value } = e.currentTarget.detail;
    const { member } = e.currentTarget.dataset;
    this.setData({
      inputValue: value,
      member: member,
    })
  },
  handleReply(e: any) {
    const { user } = e.currentTarget.dataset;
    this.setData({
      commentFocus: true,
      commentPlaceholder: `回复 ${user}：`,
      member: user,
    })
  },
  handleComment() {
    this.setData({
      commentFocus: true,
      commentPlaceholder: "",
      member: "",
    })
  },
  handleDelete() {
    this.setData({
      showDelete: false,
    })
  },
  handleShowDelete(e: any) {
    const { index } = e.currentTarget.dataset;
    this.setData({
      showDelete: true,
      deleteIndex: index
    })
  },
  getComment(e: any) {
    const { index } = e.currentTarget.dataset;
    this.setData({
      commentIndex: index,
      commentLoading: true
    })
    wx.request({
      url: "https://mock.presstime.cn/mock/656dbe322fef936d34630d40/yi-xiao-ping/more-comment",
      success: (res: {
        data: {
          data: GalleryDetail,
          code: number,
        }
      }) => {
        const { data } = res
        const { data: commentData, code } = data
        if (code === 200) {
          const { comments } = commentData
          const replies = comments
          const commentsItem = this.data.commentArr[index]
          commentsItem.replies = replies
          this.setData({
            commentArr: [
              ...this.data.commentArr
            ],
            commentLoading: false
          })
        }
      }
    })
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad() {
    this.setData({
      userId: app.globalData.userId
    })
    wx.request({
      url: "https://mock.presstime.cn/mock/656dbe322fef936d34630d40/yi-xiao-ping/gallery-detail",
      success: (res: {
        data: {
          code: number,
          data: GalleryDetail
        },
      }) => {
        const { data } = res
        const { data: detailData, code } = data
        if (code === 200) {
          const { name, detail, comments: commentArr } = detailData
          const { comments, collects, likes, picUrl } = detail
          this.setData({
            name: name,
            collects: collects,
            likes: likes,
            comments: comments,
            picUrl: picUrl,
            commentArr: commentArr
          })
        }
      }
    })
  },
  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady() {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow() {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide() {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload() {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh() {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom() {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage() {

  }
})